import React from 'react'
import { browserHistory } from 'react-router'
import { Button, Icon } from 'react-weui'
import Title from '../../ReuseTitle'
import Item from './UserAddItem'

import { connectAddress } from '../../../container/address/connectAddress'


const IconBox = (props) => (
    <div style={{ textAlign: 'center',marginTop: '120px'}}>
        <Icon size="large" value="warn" primary />
        <p style={{ lineHeight: '3.5em'}}>您还没添加任何收货地址</p>
    </div>     
)

class UserAddress extends React.Component {
	constructor(props) {
		super(props)
		this.addAddress = this.addAddress.bind(this)
	}

  addAddress() {
    const storeId = this.props.params.storeId;
    browserHistory.push(`/store/${storeId}/user/set-address`)
  }

  componentWillMount() {
    const session = localStorage.getItem('session');
        const isAuth = localStorage.getItem('isAuthenticated');
        if(!session || !isAuth) {
             browserHistory.push(`/store/${this.props.params.storeId}/user/login`);
    }
  }
	componentDidMount() {
		this.props.addressActions.fetchAddress();
	}
	render() {
		const { isFetched, isDeled, isSeted, addressData } = this.props.address;
		const { storeId } = this.props.params;
		const { delAddress, fetchAddress, setDefaultAddress } = this.props.addressActions;
		return (
            <div>
          		<Title title="我的地址" name='address' storeId={storeId} />
          		{
          			addressData.length > 0?
          			<div style={{ margin: '60px 0' }}>
          		    	{addressData.map(function(data,i) {
          		    		return <Item 
          		    					add_data={data} 
          		    					key={data.addressId} 
          		    					storeId={storeId} 
          		    					isDeled={isDeled}
          		    					isSeted={isSeted}
          		    					delAddress={delAddress} 
          		    					fetchAddress={fetchAddress} 
          		    					setDefaultAddress={setDefaultAddress}
          		    				/>
          		    	})}
          			</div>:<IconBox />
          		}
          		
          		<Button type="primary" style={{ position: 'fixed', bottom: 0}} onClick={this.addAddress}>添加新地址</Button>
            </div>
		);
	}
}
export default connectAddress(UserAddress)